<script lang="ts">
  import type { KeyValuePair } from "@sparrow/common/interfaces/request.interface";
  import { TabularInput } from "@sparrow/workspaces/components";
  import { createDeepCopy } from "@sparrow/common/utils/conversion.helper";
  import MixpanelEvent from "@app/utils/mixpanel/MixpanelEvent";
  import { Events } from "@sparrow/common/enums";
  import { Toggle } from "@sparrow/library/ui";

  export let environmentVariables;
  export let onHeadersChange;
  export let headers;
  export let autoGeneratedHeaders;
  export let authHeader;

  export let isBulkEditActive;
  export let handleOpenCurrentDynamicExpression;
  let isBulkEditRequired = true;
  let isBulkEditHeaderInfoRequired = true;
  export let onUpdateEnvironment;

  //   let placeholderHeader=`Usage: Use bulk edit to manage multiple Headers quickly. Separate each entry with a new line.
  // Format: Header-Key: Header-Value
  // Example: userID: Sparrow12`

  let placeholderHeader =
    "Usage - Manage multiple headers.  Format - Key: Value";

  let showGeneratedHeader: boolean = false;

  const handleHeaderChange = (pairs: KeyValuePair[]): void => {
    onHeadersChange("headers", pairs);
  };

  const handleAutoGeneratedChange = (pairs: KeyValuePair[]): void => {
    onHeadersChange("autoGeneratedHeaders", pairs);
  };

  const toggleBulkEdit = (value: boolean) => {
    MixpanelEvent(Events.Bulk_Edit_Headers);
    onHeadersChange("isHeaderBulkEditActive", value);
  };
</script>

<section class="w-100" style="pointer-events: none;">
  <TabularInput
    isCheckBoxEditable={false}
    isInputBoxEditable={false}
    isBulkEditRequired={false}
    bulkEditPlaceholder={placeholderHeader}
    {isBulkEditHeaderInfoRequired}
    {isBulkEditActive}
    onToggleBulkEdit={toggleBulkEdit}
    keyValue={createDeepCopy(headers)}
    callback={handleHeaderChange}
    {environmentVariables}
    {onUpdateEnvironment}
    dynamicExpression={true}
    handleOpenCurrentDynamicExpression={(obj) => {
      handleOpenCurrentDynamicExpression({ ...obj, type: "headers" });
    }}
  />
  <div>
    <!-- {#if !isBulkEditActive}
      <div class="d-flex align-items-center py-3">
        <Toggle
          bind:isActive={showGeneratedHeader}
          label="Show auto-generated headers"
        />
      </div>
    {/if} -->
  </div>

  {#if showGeneratedHeader && !isBulkEditActive}
    <TabularInput
      isCheckBoxEditable={true}
      isInputBoxEditable={false}
      isTopHeaderRequired={false}
      readable={authHeader}
      keyValue={createDeepCopy(autoGeneratedHeaders)}
      callback={handleAutoGeneratedChange}
      {environmentVariables}
      onToggleBulkEdit={() => {}}
      onUpdateEnvironment={() => {}}
    />
  {/if}
</section>

<style>
</style>
